import React, { Component, Fragment } from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import {
  Row,
  Col,
  Icon,
  Card,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
} from 'antd';
import {
  ChartCard,
  yuan,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from 'components/Charts';
import { getTimeDistance } from '../../utils/utils';

import styles from './Analysis.less';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;


@connect(({ userAnalysis, loading }) => ({
  userAnalysis,
  loading: loading.effects['userAnalysis/fetch'],
}))
export default class Analysis extends Component {
  state = {
    salesType: 'all',
    currentTabKey: '',
    rangePickerValue: getTimeDistance('year'),
  };

  componentDidMount() {
    this.props.dispatch({
      type: 'userAnalysis/fetch',
    });
    this.props.dispatch({
      type: 'userAnalysis/fetchProvince',
    });
    this.props.dispatch({
      type: 'userAnalysis/fetchSex',
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'userAnalysis/clear',
    });
  }

  render() {
    const { userAnalysis : { data, sex, province }, loading } = this.props;

    const provinceData = province.map(v=>{
      return {
        x : v.province || '未知',
        y : v.count
      }
    });

    const sexName = {
      'UNKNOWN' : '未知',
      'MALE' : '男',
      'FEMALE': '女',
    }
    const sexData = sex.map(v=>{
      return {
        x : sexName[v.sex] ,
        y : v.count,
      }
    });

    const Info = ({ title, value, bordered }) => (
      <div className={styles.headerInfo}>
        <span>{title}</span>
        <p>{value}</p>
        {bordered && <em />}
      </div>
    );

    return (
      <Fragment>
        <Card bordered={false}>
          <Row>
            <Col sm={8} xs={24}>
              <Info title="用户总数" value={data.total} bordered />
            </Col>
            <Col sm={8} xs={24}>
              <Info title ="今日新增" value={data.todayIncrement} bordered />
            </Col>
            <Col sm={8} xs={24}>
              <Info title="本月新增" value={data.monthIncrement} />
            </Col>
          </Row>
        </Card>
        <Row gutter={24} style={{marginTop:'24px'}}>
          <Col xl={12} lg={24} sm={24} xs={24}>
            <Card
              title="地区分布"
              loading={loading}
              bordered={false}
              bodyStyle={{ overflow: 'hidden' }}
            >
              <Pie
                hasLegend
                title="地区分布"
                subTitle="地区总数"
                total={() => (
                  <span
                    dangerouslySetInnerHTML={{
                      __html: provinceData.length
                    }}
                  />
                )}
                data={provinceData}
                height={294}
              />
            </Card>
          </Col>
          <Col xl={12} lg={12} sm={24} xs={24}>
            <Card
              title="男女比例"
              loading={loading}
              bordered={false}
              bodyStyle={{ overflow: 'hidden' }}
            >
              <Pie
                hasLegend
                title="男女分布"
                data={sexData}
                height={294}
              />
            </Card>
          </Col>
        </Row>
      </Fragment>
    );
  }
}
